// Created by liusc on 2020/7/28--11:17.
<template>
    <div>
        <el-dialog
            :title="isEdit?'查看':'查看'"
            :visible.sync="dialogVisible"
            width="1200px"
             :close-on-click-modal="false">
            <el-form ref="edit-form" :model="form" :rules="rules" class="form-wrap">
                <el-form-item label="街道名称" prop="streetName">
                    <el-select v-model="form.streetName" placeholder="请选择街道名称" disabled="disabled">
                        <el-option
                            v-for="item in lists"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="社区名称" prop="communityName">
                    <el-select v-model="form.communityName" placeholder="请选择社区名称" disabled="disabled">
                        <el-option
                            v-for="item in lists2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="设施类型" prop="deviceType">
                    <el-select v-model="form.deviceType" placeholder="请选择设施类型" disabled="disabled">
                        <el-option
                            v-for="item in lists3"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="具体类型" prop="specificType">
                    <el-select v-model="form.specificType" placeholder="请选择具体类型" disabled="disabled">
                        <el-option
                            v-for="item in lists4"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="近期需求用房面积" prop="uesArea">
                    <el-input v-model="form.uesArea" placeholder="请输入近期需求用房面积" readonly="readonly">
                        <template slot="append">m²</template>
                    </el-input>
                </el-form-item>

                <el-form-item label="物业位置" prop="position">
                    <el-input v-model="form.position" placeholder="请输入物业位置" readonly="readonly">
                    </el-input>
                </el-form-item>


                <el-form-item label="备注" class="full" prop="remarks">
                    <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注" readonly="readonly"></el-input>
                </el-form-item>

                <el-form-item label="主键ID" prop="publicServiceFacilityId" style="display: none;">
                    <el-input v-model="form.publicServiceFacilityId" type="hidden"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import {getDict} from "~/utils";

    export default {
        name: "edit-match-info",
        data() {
            return {
                dialogVisible: false,
                form: {
                    id: '',
                    streetName: '',
                    communityName: '',
                    deviceType: '',
                    specificType: '',
                    uesArea: '',
                    position: '',
                    remarks: ''
                },
                rules: {

                },
                isEdit: false
            }
        },

        created() {
            this.lists = getDict('street_names');
            this.lists2 = getDict('community_names');
            this.lists3 = getDict('device_types');
            this.lists4 = getDict('specific_types');
        },

        mounted() {
        },

        methods: {
            show(data) {
                console.log(data)
                this.dialogVisible = true
                this.isEdit = false
                setTimeout(() => {
                    this.$refs['edit-form'].resetFields()
                    if (data) {
                        console.log(JSON.stringify(data))
                        this.isEdit = true
                        let form = {}
                        this.form = Object.keys(this.form).forEach(key => {
                            form[key] = data[key]
                        })
                        this.form = form
                    }
                }, 100)
            },
        }
    }
</script>

<style scoped lang='scss'>
    

    @include formWrap(4);

</style>

